<link rel="stylesheet" href="/assets/home/css/details.css">
<!-- ckplayer  css文件 -->
<link rel="stylesheet" href="/assets/home/js/ckplayer/css/ckplayer.css">
<!-- ckplayer js文件 -->
<script src="/assets/home/js/ckplayer/js/ckplayer.min.js"></script>

<div id="cover">
	<!-- 课程封面 -->
	<img class="cover_bg" src="{$info.thumbs}">
	<!-- 中间播放键 -->
	<div id="play">
		<img src="/assets/home/images/play.png" />
	</div>
</div>

<!-- ckplayer视频容器元素 -->
<div id="video"></div>

<!-- 课程信息 -->
<div class="head">
	<!-- 课程标题 -->
	<div class="weui-media-box__title">{$info.title}
		<span class="content">
			<!-- 点赞 -->
			<span id="zan">
				{if condition="$info['likes_status']"}
				<!-- 点赞 -->
				<img class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
				{else /}
				<!-- 未点赞 -->
				<img class="thumbs" src="/assets/home/images/thumbs.png" alt="">
				{/if}
				<span class="num">{$info.likes_text}</span>
			</span>
		</span>
	</div>
	<div class="price">￥{$info.price}元&nbsp;&nbsp;</div>
</div>

<div class="title">
	课程介绍
</div>

<div class="mui-table-view" style="padding:10px;">
	{$info.content}
</div>
<div class="title">
	课程章节
</div>

<ul class="mui-table-view">
	{if condition="$chapterlist"}
	{foreach $chapterlist as $item}
	<li class="mui-table-view-cell active" onclick="plays(`{$item.id}`)">{$item.title}</li>
	{/foreach}
	{else /}
	<li class="mui-table-view-cell active">暂无课程章节</li>
	{/if}
</ul>

<div class="commenttitle" style="margin: 20px 15px 10px;color: #6d6d72; font-size: 15px;">
	用户评论
</div>

<!-- 评论内容 -->
<ul class="mui-table-view">
	{if condition="$commentlist"}

	{foreach $commentlist as $key => $item2}
	{if $key lt 5 }
	<li class="mui-table-view-cell mui-media">
		<a href="javascript:;">
			<img class="mui-media-object mui-pull-left userimg" src="{$item2.avatar}">
			<div class="mui-media-body">
				<div class="mmb_top">
					<span class="nickname">{$item2.nickname}</span>
					<span class="time">{$item2.createtime}</span>
				</div>
				<p class='mui-ellipsis'>{$item2.content}</p>
			</div>
		</a>
	</li>
	{/if}
	{/foreach}
	{/if}

	{if $commentlistcount egt 5 }
	<li class="mui-table-view-cell list_last"><a href="{:url('home/subject/commentlist')}?subid={$subid}">查看更多</a></li>
	{elseif $commentlistcount eq 0 }
	<li class="mui-table-view-cell list_last">暂无评论</li>
	{else /}
	<li class="mui-table-view-cell list_last">没有更多评论了</li>
	{/if}


	<br />
	<!-- 弹出菜单 -->
	<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
		<!-- 可选择菜单 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a id="buy" href="javascript:void(0)">
					立即购买
				</a>
			</li>
		</ul>
		<!-- 取消菜单 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#sheet1"><b>取消</b></a>
			</li>
		</ul>
	</div>

	<script>
		$("#iosActionsheetCancel").click(function () {
			mui('#sheet1').popover('toggle');
		})

		// 点击播放
		$("#play").on('click', function () {
			Paydata()
		})

		// 视频播放查询
		function Paydata(id) {
			$.ajax({
				type: "POST",
				url: `{:url('home/subject/play')}`,
				data: {
					subid: `{$info.id}`,
					chapterid: id ?? 0
				},
				dataType: "json",
				success: function (result) {
					if (result.code == 0) {
						let buy = result.data.buy ?? false
						if (buy) {
							mui('#sheet1').popover('toggle');
							return false;
						}
						mui.toast(result.msg)
					} else {
						let url = result.data.url ?? '';
						if (!url) {
							mui.toast('暂无视频地址');
							return false;
						}

						$("#cover").css('display', 'none');
						$("#video").css('display', 'block');

						var videoObject = {
							container: '#video',//视频容器的ID
							autoplay: true,//是否自动播放
							video: url,//视频地址
						}

						new ckplayer(videoObject);
					}
				}
			})
		}


		// 章节播放
		function plays(id) {
			Paydata(id)
		}

		$("#buy").on('click', function () {
			mui('#sheet1').popover('toggle');
			var btnArray = ['否', '是'];
			mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
				if (e.index == 1) {
					$.ajax({
						type: "POST",
						url: `{:url('home/subject/buy')}`,
						data: {
							subid: `{$info.id}`
						},
						dataType: "json",
						success: function (result) {
							mui.toast(result.msg)
							if (result.code == 1) {
								setTimeout(() => {
									location.href = `{:url('home/business/order')}`
								}, 1000)
							}
						}
					})
				}
			})
		})

		// 点赞功能
		$("#zan").click(function () {
			$.ajax({
				type: "POST",
				url: `{:url('home/subject/like')}`,
				data: {
					subid: `{$info.id}`
				},
				dataType: "json",
				success: function (result) {
					mui.toast(result.msg)
					if (result.code == 1) {
						setTimeout(() => {
							location.reload()
						}, 1000)
					}
				}
			})
		})


	</script>